<script setup lang="ts">
import Carousel from './components/carousel/index.vue'
import Search from './components/search/index.vue'
import Classify from './components/classify/index.vue'
import Card from './components/card/index.vue'
import { onMounted, ref } from 'vue';
import { getHospitalListAPI } from '@/api/home';
import { Content } from '@/api/type/home';
import Tip from './components/tip/index.vue'
//分页器
let page=ref<number>(1)
let pagesize=ref<number>(10)
let hospitalList=ref<Content[]>([])
let totalHospital=ref<number>(0)
//获取医院数据
const getHospitalList=async ()=>{
  const res=await getHospitalListAPI(page.value,pagesize.value,hosType.value,districtCode.value,)
  hospitalList.value=res.data.content
  totalHospital.value=res.data.totalElements
}
//子传父事件
let hosType=ref<string>('')
let districtCode=ref<string>('')
const getLevel=(level:string)=>{
  hosType.value=level
  getHospitalList()
}
const getRegion=(region:string)=>{
districtCode.value=region
getHospitalList()
}
onMounted(()=>{
  getHospitalList()
})
</script>

<template>
  <div>
   <Carousel/>
   <Search/>
   <el-row class="bottom">
    <el-col :span="20">
      <Classify @getLevel="getLevel" @getRegion="getRegion"/>
      <div class="hospital_card" v-if="hospitalList.length>0">
        <Card class="card_item" v-for="item in hospitalList " :key="item.id" :hospitalInfo="item"/>
        <el-pagination
            v-model:current-page="page"
            v-model:page-size="pagesize"
            :page-sizes="[10, 20, 30, 40]"
            layout="  prev, pager, next,sizes,total,"
            :total="totalHospital"
            @current-change="getHospitalList"
            @size-change="getHospitalList"
        />
      </div>
      <el-empty v-else description="没有医院" />
    </el-col>
    <el-col :span="4">
      <Tip/>
    </el-col>
   </el-row>
  </div>
</template>

<style lang="scss" scoped>
.bottom {
  margin-top: 70px;
  padding-bottom: 40px;
}
.hospital_card {
  display: flex;
  flex-wrap: wrap;
  padding: 0 80px 0 10px;
  .card_item {
    width: 49%;
    margin-top: 30px;
    border: none;
  }
}
</style>